import { useState } from 'react';
import { Button, Form, DatePicker } from 'antd';
import { ReloadOutlined } from "@ant-design/icons";
import IconFont from '@/components/IconFont';
import DebounceMultipleSelect from '@/components/DebounceMultipleSelect';
import { selectStoreAreasByName, queryFactoryList } from '../service';


const { RangePicker } = DatePicker;

//表单搜索区域
const FormSearch = ({ type, refs, handleOk }) => {

  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);

  //获取供应商列表
  function fetchStoreList(storeName) {
    return new Promise(async (resolve, reject) => {
      setLoading(true);
      const { data, success } = await queryFactoryList({ storeName });
      setLoading(false);
      if (success && data?.records?.length) {
        const newArr = [];
        data.records.map(item => {
          newArr.push({
            label: item.storeName,
            value: item.storeId,
          })
        })
        resolve(newArr);
      } else {
        reject();
      }
    })
  }

  //获取门店区域编码
  function fetchStoreArea(areaCode) {
    return new Promise(async (resolve, reject) => {
      setLoading(true);
      const { data, success } = await selectStoreAreasByName({ areaCode });
      setLoading(false);
      if (success && data?.length) {
        const newArr = [];
        data.map(item => {
          newArr.push({
            label: item.name,
            value: item.id,
          })
        })
        resolve(newArr);
      } else {
        reject();
      }
    })
  }

  const onFinish = (val) => {
    handleOk(val);
  }

  const onReset = () => {
    form.resetFields();
    handleOk({});
  }

  return (
    <Form
      form={form}
      name="basic"
      layout='inline'
      autoComplete="off"
      size='middle'
      className="views-search-form"
      onFinish={onFinish}
      onReset={onReset}
      ref={refs}
      style={{ padding: "16px 16px 8px", background: '#fff' }}
    >

      <Form.Item name="supplierIdList" style={{ marginBottom: '8px' }}>
        <DebounceMultipleSelect
          showSearch
          allowClear
          needFetchFirst
          mode="multiple"
          labelInValue={false}
          placeholder="供应商"
          maxTagCount={1}
          style={{ width: 210 }}
          notFoundContent={loading ? '加载中' : '暂无数据'}
          fetchOptions={fetchStoreList}
        />
      </Form.Item>

      <Form.Item name="supplierAreaList" style={{ marginBottom: '8px' }}>
        <DebounceMultipleSelect
          showSearch
          allowClear
          mode="multiple"
          needFetchFirst
          labelInValue={false}
          placeholder="区域编码"
          maxTagCount={1}
          style={{ width: 210 }}
          notFoundContent={loading ? '加载中' : '暂无数据'}
          fetchOptions={fetchStoreArea}
        />
      </Form.Item>

      {type == '2' && <Form.Item name="time" style={{ marginBottom: '8px' }}>
        <RangePicker />
      </Form.Item>}

      <Form.Item style={{ marginBottom: '8px' }}>
        <Button
          type="primary"
          icon={<IconFont type="iconsousuo" style={{ fontSize: 14 }} />}
          htmlType="submit"
          style={{ marginRight: 8 }}
        >
          搜索
        </Button>
        <Button htmlType="reset"><ReloadOutlined /> 重置</Button>
      </Form.Item>
    </Form>
  )
}

export default FormSearch;